<template>
    <div class=" w-full min-h-[100vh] bg-[#F2F2F2] text-[14px]">
        <div class="p-[15px] w-full bg-white">
            <div class=" w-full bg-[#FBFBFB] rounded-[5px] flex justify-center items-center flex-col pt-[15px]">
                <div class="text-[#696969] text-[14px]">总佣金（元）</div>
                <div class="mt-[10px] text-[#F47716] text-[32px] font-medium">{{ order_total }}</div>
            </div>
        </div>
        <div class="p-[15px]">
            <div class=" w-full bg-white rounded-[5px] p-[10px]">
                <div class="flex items-center" @click="openPop">
                    <div class="text-[14px] text-[#F47716] font-medium mr-[5px]">筛时间</div>
                    <img :src="getAssetsFile('mine/arrow_bottom.png')" class="w-[8px] h-[8px]" alt="">
                </div>
                <div class="mt-[20px] flex w-full justify-between">
                    <div class="flex flex-col justify-center items-center">
                        <div class="text-[#696969] text-[11px]">新增订单(份)</div>
                        <div class="mt-[12px] font-medium text-[18px]">{{ Info.order_count ? Info.order_count : 0 }}
                        </div>
                    </div>
                    <div class="flex flex-col justify-center items-center">
                        <div class="text-[#696969] text-[11px]">订单总保费(元)</div>
                        <div class="mt-[12px] font-medium text-[18px]">{{ Info.total_price }}</div>
                    </div>
                    <div class="flex flex-col justify-center items-center">
                        <div class="text-[#696969] text-[11px]">总佣金(元)</div>
                        <div class="mt-[12px] font-medium text-[18px]">{{ Info.order_total }}</div>
                    </div>
                </div>
            </div>
            <div class="mt-[30px] text-[14px] font-bold mb-[10px]">订单数据</div>
            <van-list v-model:loading="listLoading" :finished="finished" finished-text="没有更多了" @load="load">
                <div class="mb-[10px] bg-white rounded-[5px] p-[13px]" v-for="item in Info.data">
                    <div class="text-[13px] flex justify-between items-center pb-[10px] border-b">
                        <div class="">订单号：{{ item.order_no }}</div>
                        <div class="text-[#F00505]" v-if="item.state == 0">未生效</div>
                        <div class="text-[#6D6D6D]" v-if="item.state == 1">已失效</div>
                        <div class="text-[#0CB031]" v-if="item.state == 2">保障中</div>

                    </div>
                    <div class="mt-[12px]">{{ item.name }}</div>
                    <div class="mt-[12px] text-[#6D6D6D] text-[12px]">保单号：{{ item.bd_no }}</div>
                    <div class="mt-[8px] flex items-center">
                        <img :src="getAssetsFile('mine/user.png')" class="w-[14px] h-[14px] mr-[5px]" alt="">
                        <div class="text-[#6D6D6D] text-[12px]">{{ item.insure_name }}</div>
                    </div>
                    <div class="mt-[8px] flex items-center">
                        <img :src="getAssetsFile('mine/time.png')" class="w-[14px] h-[14px] mr-[5px]" alt="">
                        <div class="text-[#6D6D6D] text-[12px]">{{ item.start_time }} - {{ item.end_time }}</div>
                    </div>
                    <div class=" w-full flex justify-end">
                        <div>
                            <span class="text-[10px] font-medium">￥</span>
                            <span class="text-[16px] font-bold">{{ item.total_price }}</span>
                            <span class="text-[10px]">元</span>
                        </div>
                    </div>
                </div>
                <div v-if="Info.data.length <= 0 && !loading">
                    <nodata></nodata>
                </div>
            </van-list>

        </div>
        <van-popup v-model:show="popupShow" position="bottom" class="py-[22px] px-[15px]">
            <div class=" w-full text-center relative font-medium">
                筛时间
                <div class=" absolute top-0 right-0" @click="popupShow = false">
                    <img :src="getAssetsFile('mine/close.png')" class="w-[10px] h-[10px]" alt="">
                </div>
            </div>
            <div class="mt-[20px] flex w-full justify-between items-center">
                <div v-for="(item, index) in tabs"
                    class="w-[105px] h-[30px] flex justify-center items-center text-[12px]"
                    :class="item.isActive ? 'bg-[rgba(244,119,22,0.1)] text-[#F47716]' : 'bg-[#F6F6F6] text-[#696969]'"
                    @click="clickTabs(item, index)">
                    {{ item.name }}
                </div>
            </div>
            <div class="flex justify-between items-center">
                <div class="mt-[20px] flex justify-center items-center w-[160px] h-[30px] border border-[#D9D9D9] rounded-[3px]"
                    @click="openPicker(1)">
                    <img :src="getAssetsFile('mine/times.png')" class="w-[10px] h-[10px]" alt="">
                    <div class="ml-[5px]  text-[10px]" :class="param.stime ? 'text-[#333333]' : 'text-[#9B9B9B]'">
                        {{ param.stime ? param.stime : '请选择开始时间'
                        }}</div>
                </div>
                <div>-</div>
                <div class="mt-[20px] flex justify-center items-center w-[160px] h-[30px] border border-[#D9D9D9] rounded-[3px]"
                    @click="openPicker(2)">
                    <img :src="getAssetsFile('mine/times.png')" class="w-[10px] h-[10px]" alt="">
                    <div class="ml-[5px]  text-[10px]" :class="param.etime ? 'text-[#333333]' : 'text-[#9B9B9B]'">{{
                        param.etime ?
                            param.etime : '请选择结束时间' }}</div>
                </div>
            </div>
            <div class="mt-[30px] flex justify-between">
                <div class="w-[167px] h-[40px] flex justify-center items-center bg-[#D9D9D9] text-white rounded-[5px]"
                    @click="reset">
                    重置</div>
                <div class="w-[167px] h-[40px] flex justify-center items-center bg-[#F47716] text-white rounded-[5px]"
                    @click="sumbit">
                    确定</div>
            </div>
        </van-popup>
        <van-popup v-model:show="pickerShow" position="bottom" class="py-[22px] px-[15px]">
            <div>
                <van-date-picker v-model="currentDate" title="选择日期" @cancel="pickerShow = false"
                    @confirm="pickerConfirm" />
            </div>
        </van-popup>

    </div>
</template>
<script setup lang="ts">
import getAssetsFile from "@/utils/getImageurl";
import { achievement, achieve } from '@/utils/api'
import nodata from "@/components/nodata.vue";
import { ref, reactive, computed, onMounted, inject } from 'vue'
const popupShow = ref(false)
const currentDate = computed(() => {
    return getDate();
});
let loading = inject<any>("loading");
const year = ref()
const month = ref()
const strDate = ref()
const pickerShow = ref(false)
const pickerIndex = ref()
const order_total = ref('');
const sell_name = ref('')
const listLoading = ref(false)
const finished = ref(false)
const tabs = ref([{
    name: "全部",
    isActive: true
}, {
    name: "本月",
    isActive: false
}, {
    name: "上月",
    isActive: false
}])
const param = reactive({
    page: 1,
    stime: "",
    etime: "",
    type: 1//1是全部 2是本月3是上个月
})
const Info = reactive({
    order_count: "",
    order_total: "",
    total_price: "",
    data: [] as any,
    current_page: 1,
    last_page: 1,
    per_page: 3,
    total: 0,

}) as any
onMounted(() => {
    // getData()
    getAchieve()
})
const load = () => {

    getData();
    param.page += 1;

}
const getAchieve = async () => {
    const res = await achieve("");
    order_total.value = res.msg.order_total;
    sell_name.value = res.msg.sell_name;
}
const getData = async () => {

    const res = await achievement(param);
    for (let i in Info) {
        if (res.msg[i] != 'undefind' && i != 'data') {
            Info[i] = res.msg[i]
        }
    }
    Info.data.push(...res.msg.data)
    listLoading.value = false

    if (Info.current_page >= Info.last_page) {
        finished.value = true;


    }
}
//重置
const reset = () => {
    tabs.value.forEach((item: any, i: number) => {
        if (i == 0) {
            item.isActive = true;
        } else {
            item.isActive = false;
        }
    })
    param.stime = '';
    param.etime = ''
    param.page = 1;
    param.type = 1;

}
//确定
const sumbit = () => {
    Info.data = []
    getData()
    popupShow.value = false;

}
const clickTabs = (item: any, index: number) => {
    tabs.value.forEach((t: any) => {
        if (item.name == t.name) {
            t.isActive = true;
        } else {
            t.isActive = false;
        }
    })
    param.type = index + 1;
    param.stime = ''
    param.etime = ''
    param.page = 1;

}
const openPop = () => {
    popupShow.value = true;
}
const pickerConfirm = (val: any) => {
    // if (val.selectedValues[0] < year.value || val.selectedValues[1] < month.value || val.selectedValues[2] < strDate.value) {
    //     showToast('时间选择不正确')
    //     return
    // }
    if (pickerIndex.value == 1) {
        param.stime = val.selectedValues[0] + '-' + val.selectedValues[1] + '-' + val.selectedValues[2]
    } else {
        param.etime = val.selectedValues[0] + '-' + val.selectedValues[1] + '-' + val.selectedValues[2]
    }
    tabs.value.forEach((item: any, i: number) => {
        if (i == 0) {
            item.isActive = true;
        } else {
            item.isActive = false;
        }
    })
    param.page = 1;
    param.type = 1;
    pickerShow.value = false


}
const openPicker = (index: number) => {
    //1是开始时间 2是结束时间
    pickerShow.value = true;
    pickerIndex.value = index;
}
//获取当前时间
const getDate = () => {
    let date = new Date();
    year.value = date.getFullYear(); //获取完整的年份(4位)
    month.value = date.getMonth() + 1; //获取当前月份(0-11,0代表1月)
    month.value = month.value < 10 ? "0" + month.value : month.value;
    strDate.value = date.getDate() + 1; // 获取当前日(1-31)
    let data = [`${year.value}`, `${month.value}`, `${strDate.value}`];
    return data;
};
</script>
<style scoped></style>